<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" type="text/css"  th:href="@{/css/homeHead.css}">
    <link rel="stylesheet" type="text/css"  th:href="@{/css/search.css}">
    <link rel="stylesheet" type="text/css"  th:href="@{/css/type.css}">
</head>
<body>
<div class="head">
  <div class="head-info">
    <div class="head-left">书口浪尖书城</div>
    <div class="head-right">
      <button class="head-btn">借阅</button>
      <button class="head-btn">购物车</button>
    </div>
  </div>
</div>

<div class="search-bar">
    <form th:action="@{/search}" method="get">
        <input type="text" class="search-input" name="keyword" placeholder="请输入搜索内容">
        <button type="submit" class="search-button">搜索</button>
    </form>
</div>

<div class="nav-bar">
    <div class="nav-item">
        <button class="nav-btn" data-category="all">全部</button>
        <div class="nav-line"></div>
    </div>
    <div class="nav-item">
        <form action="/findAllBooks">
            <input type="hidden" name="category" value="education">
            <button type="submit" class="nav-btn" data-category="education">教育</button>
        </form>
        <div class="nav-line"></div>
    </div>
    <div class="nav-item">
        <button class="nav-btn" data-category="life">生活</button>
        <div class="nav-line"></div>
    </div>
    <div class="nav-item">
        <button class="nav-btn" data-category="business">经营</button>
        <div class="nav-line"></div>
    </div>
    <div class="nav-item">
        <button class="nav-btn" data-category="social">社科</button>
        <div class="nav-line"></div>
    </div>
    <div class="nav-item">
        <button class="nav-btn" data-category="arts">文艺</button>
        <div class="nav-line"></div>
    </div>
    <div class="nav-item">
        <button class="nav-btn" data-category="teaching">教辅</button>
        <div class="nav-line"></div>
    </div>

</div>
</body>
</html>